import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { DiscoverHeaderWrapper } from './style'

interface Iprops {
    children?: ReactNode
}

const DiscoverHeader: React.FC<Iprops> = () => {
    return (
        <DiscoverHeaderWrapper>
            <div className="discover-nav">
                <div className="discover-nav-content">
                    <NavLink className="item" to="/discover/recommend">
                        推荐
                    </NavLink>
                    <NavLink className="item" to="/discover/rank">
                        排行榜
                    </NavLink>
                    <NavLink className="item" to="/discover/songs">
                        歌单
                    </NavLink>
                    <NavLink className="item" to="/discover/djradio">
                        主播电台
                    </NavLink>
                    <NavLink className="item" to="/discover/artists">
                        歌手
                    </NavLink>
                    <NavLink className="item" to="/discover/album">
                        新碟上架
                    </NavLink>
                </div>
            </div>
        </DiscoverHeaderWrapper>
    )
}

export default memo(DiscoverHeader)
